<h2 class="margin-bottom-xs margin-top-xs"><strong class="margin-right" data-bind="text: currentStep + '.'"></strong>Node Addresses (Secure Mode)</h2>
<div class="setup-nodes">
    <form class="flex-form" data-bind="submit: save">
        <div class="margin-bottom-xs">
            Please enter the server settings - IP addresses and ports.<br/>
            If you are building a cluster this is the place to add nodes and configure them.
        </div>
        <div class="margin-bottom padding" data-bind="visible: showDnsInfo, css: { 'bg-warning': $root.model.domain().reusingConfiguration, 'bg-success': !$root.model.domain().reusingConfiguration() }">
            <i class="icon-warning"></i> The following configuration will <span style="margin-left: 0" data-bind="text: $root.model.domain().reusingConfiguration() ? 'overwrite' : 'populate'"></span>
            the DNS records for the subdomain <strong data-bind="text: model.domain().fullDomain"></strong>. <br />
        </div>
        <div class="margin-bottom">
            <span class="has-disable-reason" data-bind="attr: { 'data-original-title': $root.maxNodesAddedMsg() || '' }" data-placement="right">
                <button type="button" class="btn btn-primary" data-bind="enable: !$root.maxNodesAddedMsg(), click:  $root.addNode">
                    <i class="icon-plus"></i> <span>Add node</span>
                </button>
            </span>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="nodes-list margin-bottom" data-bind="foreach: model.nodes">
                    <div class="panel padding padding-sm flex-horizontal" 
                         data-bind="css: { 'active': $data === $root.editedNode() }, click: $root.editNode">
                        <div class="flex-grow">
                            <div class="padding-xs">
                                <i class="icon-cluster-node"></i>
                                <span>Node <strong><span data-bind="text: nodeTag"></span></strong> <span data-bind="visible: $root.model.createIsLocalNodeObservable($data)" class="text-info">(local node)</span></span>    
                            </div>
                        </div>
                        <button data-bind="click: $root.editNode" class="btn btn-default" title="Edit this node">
                            <i class="icon-edit"></i>
                        </button>
                        <button data-bind="visible: $parent.model.nodes().length > 1, click: $root.removeNode" class="btn btn-danger" title="Delete this node">
                            <i class="icon-trash"></i>
                        </button>
                    </div>
                </div>
                <div data-bind="validationOptions: { errorsAsTitle: false }, validationElement: model.nodes">
                    <div class="help-block" data-bind="validationMessage: model.nodes"></div>
                </div>
            </div>
            <div class="col-md-6" data-bind="with: editedNode">
                <div class="panel padding padding-lg">
                    <div class="padding padding-sm margin-bottom" data-bind="attr: {'title': 'URL for Node ' + (nodeTag() ? nodeTag().toLocaleUpperCase() : '') }">                                              
                        <h4>Node <span data-bind="text: nodeTag() ? nodeTag().toLocaleUpperCase() : '' "></span> URL:</h4>
                        <h3 class="flex-grow">
                           <strong>https://</strong><strong data-bind="text: nodeTag() && $root.showNodeTagInUrl() ? nodeTag().toLocaleLowerCase() + '.' : ''"></strong><strong data-bind="text: $root.model.createFullNodeNameObservable($data)"></strong>
                        </h3>
                    </div>
                    <div class="form-group" data-bind="validationElement: nodeTag">
                        <label for="nodeTag" class="control-label">Node Tag</label>
                        <div class="flex-grow">
                            <input type="text" autocomplete="off" class="form-control" id="nodeTag" data-bind="textInput: nodeTag" />
                        </div>
                    </div>
                    <div class="form-group" data-bind="validationElement: hostname, visible: $root.defineServerUrl">
                        <label class="control-label">
                            <i id="dns-name-info" class="icon-info text-info"></i>&nbsp;
                            DNS Name
                            <i class="required"></i>
                        </label>
                        <div class="flex-grow" data-bind="attr: { 'title': 'Select the domain name' }">
                            <button class="btn btn-block dropdown-toggle text-left" data-toggle="dropdown">
                                <span data-bind="text: hostname() || 'Select domain name'"></span>
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" data-bind="foreach: $root.model.certificate().certificateCNs">
                                <li><a href="#" data-bind="text: $data, click: $parent.hostname.bind($parent.hostname, $data)"></a></li>
                            </ul>
                            <span class="help-block" data-bind="validationMessage: hostname"></span>
                        </div>
                    </div>
                    <div class="form-group" data-bind="validationElement: port">
                        <label for="port" class="control-label">
                            <i id="https-port-info" class="icon-info text-info"></i>&nbsp;
                            HTTPS Port
                        </label>
                        <div class="flex-grow">
                            <input type="text" autocomplete="off" class="form-control" id="port"
                                   placeholder="Default: 443"
                                   data-bind="textInput: port, disable: $root.model.fixPortNumberOnLocalNode() && $root.model.createIsLocalNodeObservable($data)(), attr: { title: $root.model.fixPortNumberOnLocalNode() && $root.model.createIsLocalNodeObservable($data)() ? 'Fixed by startup parameter' : '' }">
                        </div>
                    </div>
                    <div class="form-group" data-bind="validationElement: tcpPort">
                        <label for="tcpPort" class="control-label">
                            <i id="tcp-port-info" class="icon-info text-info"></i>&nbsp;
                            TCP Port
                        </label>
                        <div class="flex-grow">
                            <input type="text" autocomplete="off" class="form-control" id="tcpPort"
                                   placeholder="Default: 38888"
                                   data-bind="textInput: tcpPort, disable: $root.model.fixTcpPortNumberOnLocalNode() && $root.model.createIsLocalNodeObservable($data)(), attr: { title: $root.model.fixTcpPortNumberOnLocalNode() && $root.model.createIsLocalNodeObservable($data)() ? 'Fixed by startup parameter' : '' }">
                        </div>
                    </div>
                    <div data-bind="foreach: ips">
                        <div class="form-group" data-bind="validationElement: ip">
                            <label class="control-label" data-bind="attr: { for: 'ipInput_' + $index() }">
                                <span data-bind="visible: $index() === 0">
                                    <i data-bind="attr: { 'id': $parent.mode() === 'Secured' ? 'ip-address-info' : 'ip-address-info-with-warning' }" class="icon-info text-info"></i>&nbsp;
                                    IP Address / Hostname
                                    <i class="required"></i>
                                </span>
                            </label>
                            <div class="flex-grow input-group dropdown ip-dropdown" data-bind="validationOptions: { insertMessages: false }, css: { 'has-warning': $parent.isLoopbackOnly() }">
                                <input type="text" autocomplete="off" class="form-control" placeholder="Enter Server IP Address / Hostname" 
                                       data-bind="textInput: ip, attr: { id: 'inInput_' + $index() }">
                                <span class="caret dropdown-toggle" data-toggle="dropdown"></span>
                                <ul class="dropdown-menu" role="menu" style="display: none;"
                                    data-bind="autoComplete: '#inInput_' + $index(), foreach: $root.model.createIsLocalNodeObservable($parent)() ? $root.model.localIps : $root.remoteNodeIpOptions">
                                    <li role="presentation" data-bind="click: $parent.ip.bind($parent, $data)">
                                        <a role="menuitem" tabindex="-1" href="#">
                                            <span data-bind="text: $data"></span>
                                        </a>
                                    </li>
                                </ul>
                                <div class="help-block" data-bind="validationMessage: ip"></div>
                                <div class="help-block" data-bind="visible: $parent.isLoopbackOnly()">This node won't be reachable from outside this machine.</div>
                            </div>
                            <button class="btn btn-danger" data-bind="visible: $parent.ips().length > 1, click: $root.removeIpFromNode.bind($root, $parent, $data)"><i class="icon-trash"></i></button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label"></label>
                        <div class="flex-grow">
                            <button class="btn btn-default" data-bind="click: $root.addIpAddressFromNode.bind($root, $data)">
                                <i class="icon-plus"></i>
                                <span>Add another IP Address</span>
                            </button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label"></label>
                        <div class="flex-grow">
                            <div data-bind="validationElement: ips">
                                <div class="help-block" data-bind="validationMessage: ips"></div>
                            </div>
                        </div>
                    </div>
                    <div data-bind="if: $root.canCustomizeExternalIpsAndPorts()">
                        <p class="text-info bg-info padding padding-sm">
                            RavenDB will update the DNS record for:<br/>
                            <strong data-bind="text: (nodeTag() ? nodeTag().toLocaleLowerCase() : '') + '.' + $root.model.createFullNodeNameObservable($data)()"></strong>
                            <span data-bind="visible: effectiveIpAddresses().length <= 1">to IP Address:</span>
                            <span data-bind="visible: effectiveIpAddresses().length > 1">to IP Addresses:</span>
                            <strong data-bind="text: effectiveIpAddresses() || '<Enter IP/Hostname>'"></strong>
                        </p>
                        <div class="checkbox">
                            <input id="customize1" type="checkbox" data-bind="checked: advancedSettingsCheckBox, disable: ipsContainHostName() || ($root.requirePublicIpWhenBindAllUsed() && ipContainBindAll())">
                            <label for="customize1">Customize external IP and Ports</label>
                        </div>
                        <div data-bind="collapse: showAdvancedSettings" class="margin-top">
                            <div class="form-group" data-bind="validationElement: externalIpAddress">
                                <label class="control-label">External IP Address<i class="required" data-bind="visible: ipsContainHostName"></i></label>
                                <div class="flex-grow">
                                    <input type="text" autocomplete="off" class="form-control" placeholder="Enter external IP address"
                                           data-bind="textInput: externalIpAddress">
                                </div>
                            </div>
                            <div class="form-group" data-bind="validationElement: externalHttpsPort">
                                <label class="control-label">External HTTPS Port</label>
                                <div class="flex-grow">
                                    <input type="text" autocomplete="off" class="form-control" placeholder="Enter external HTTPS port"
                                           data-bind="textInput: externalHttpsPort">
                                </div>
                            </div>
                            <div class="form-group" data-bind="validationElement: externalTcpPort">
                                <label class="control-label">External TCP Port</label>
                                <div class="flex-grow">
                                    <input type="text" autocomplete="off" class="form-control" placeholder="Enter external TCP port"
                                           data-bind="textInput: externalTcpPort">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div data-bind="if: $root.canCustomizeExternalTcpPorts()">
                        <div class="checkbox">
                            <input id="customize2" type="checkbox" data-bind="checked: advancedSettingsCheckBox">
                            <label for="customize2">Customize external ports</label>
                        </div>
                        <div data-bind="collapse: showAdvancedSettings" class="margin-top">
                            <div class="form-group" data-bind="validationElement: externalHttpsPort">
                                <label class="control-label">External HTTPS Port</label>
                                <div class="flex-grow">
                                    <input type="text" autocomplete="off" class="form-control" placeholder="Enter external HTTPS port"
                                           data-bind="textInput: externalHttpsPort">
                                </div>
                            </div>
                            <div class="form-group" data-bind="validationElement: externalTcpPort">
                                <label class="control-label">External TCP Port</label>
                                <div class="flex-grow">
                                    <input type="text" autocomplete="off" class="form-control" placeholder="Enter external TCP port"
                                           data-bind="textInput: externalTcpPort">
                                </div>
                            </div>
                        </div>
                     </div>
                </div>
            </div>
        </div>
        <div class="panel padding">
            <h3>Studio Configuration</h3>
            <div class="form-group" data-bind="validationElement: model.environment, with: $root.model">
                <label class="control-label"></label>
                <div class="flex-horizontal">
                    <label class="form-control-static">Environment</label>
                    <div style="position: relative" class="margin-left">
                        <button class="btn btn-block dropdown-toggle" type="button" data-toggle="dropdown">
                            <span data-bind="text: environment"></span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" data-bind="foreach: $root.constructor.environments">
                            <li><a href="#" data-bind="text: $data, click: $parent.environment.bind($parent.environment, $data)"></a></li>
                        </ul>
                        <span class="help-block" data-bind="validationMessage: environment"></span>
                    </div>
                </div>
            </div>
            <hr />
            <h3>Admin Client Certificate</h3>
            <div class="form-group">
                <label class="control-label"></label>
                <div class="flex-grow">
                    <div class="checkbox">
                        <input id="installClientCertificate" type="checkbox" data-bind="checked: model.registerClientCertificate()">
                        <label for="installClientCertificate">Automatically register the certificate in this (local) OS</label>
                    </div>
                </div>
            </div>
            <div class="form-group" data-bind="if: showCertificateExpiration, visible: showCertificateExpiration, validationElement: validityPeriod">
                <label class="control-label"></label>
                <div class="flex-grow flex-horizontal">
                    <label for="monthsInput" class="form-control-static">Expire in</label>
                    <div class="input-group margin-top margin-top-sm" style="flex-grow: 0.1;">
                        <input type="number" min="1" class="form-control margin-left" id="monthsInput" data-bind="numericInput: validityPeriod"
                               placeholder="Validity period (Default: 60)" />
                        <div class="input-group-addon">months</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel padding" data-bind="if: showAgreement, visible: showAgreement">
            <div class="checkbox" data-bind="validationOptions: { insertMessages: false }">
                <input id="agree" type="checkbox" data-bind="checked: confirmation">
                <label for="agree">I accept <a target="_blank" data-bind="attr: { href: model.agreementUrl }">Let's Encrypt Subscriber Agreement</a></label>
            </div>
            <div data-bind="validationElement: confirmation">
                <div class="help-block" data-bind="validationMessage: confirmation"></div>
            </div>
        </div>
        <div class="navigation margin-top margin-bottom flex-horizontal">
            <button type="button" class="btn btn-default" data-bind="click: $root.back">
                <i class="icon-arrow-left"></i><span>Back</span>
            </button>
            <div class="flex-separator"></div>
            <button type="submit" class="btn btn-primary">
                <span>Finish</span> <i class="icon-arrow-right"></i>
            </button>
        </div>
    </form>
</div>
      
